<template>
  <div class="ranking_Bigbox" v-for="(item1, index) in rankingbox" :key="index">
    <div class="ranking_sign">
      <!--背景加图标-->
      <div class="ranking_pic">
        <img :src="item1.sign" style="width: 39px; height: 39px" alt="" />
      </div>
      <!-- 这部分可能要做跳转 -->
      <div class="ranking_func">
        <div class="ranking_name">{{ item1.listname }}</div>
        <div @click="toPlayPage()" class="ranking_play">
          <img
            src="../../assets/play_cnt.png"
            style="width: 24px; height: 24px"
            alt=""
          /><span>播放</span>
        </div>
        <!-- <div class="ranking_collect">
          <img
            src="../../assets/collect1.png"
            style="width: 24px; height: 20px"
            alt=""
          /><span>收藏</span>
        </div> -->
      </div>
    </div>
    <!-- 排名榜 -->
    <div class="ranking_box">
      <!-- v-for -->
      <div class="ranking" v-for="(item2, index) in ranking" :key="index">
        <div class="ranking_num">{{ index + 1 }}</div>
        <!--另一种写法 index + 1  //index默认值为0，随着循环每轮+1 给数字赋值-->
        <div class="ranking_song_name">{{ item2.name }}</div>
        <div class="ranking_singer">{{ item2.author }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: "",
  props: {
    rankingbox: Array,
    ranking: Array,
  },
  data() {
    return {
      isRank: 0, //1为热歌榜,2为新歌榜
    };
  },
  methods: {
    toPlayPage() {
      console.log(this.isRank)
      this.$router.push({
        path: "/play_page",
        query: {
          flag: this.isRank + 4,
        },
      });
    },
  },
};
</script>
<style scoped>
.ranking_Bigbox {
  display: flex;
  overflow: hidden;
  width: 1137px;
  height: 300px;
  padding: 49px 30px 35px;
  background: #21262c;
}
.ranking_sign {
  display: flex;
  margin-right: 23px;
}
.ranking_pic {
  width: 91px;
  height: 91px;
  margin-right: 9px;
  background: #ffffff;
  border-radius: 8px 5px 5px 5px;
  background-image: url(../../assets/beach-dawn-dusk-ocean-preview.png);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
}

.ranking_pic img {
  transform: translateY(-80px);
  filter: drop-shadow(#000 0 80px);
}
.ranking_name {
  font-size: 18px;
  font-family: HYGangYiTiJ;
  font-weight: 400;
  color: #ffffff;
  line-height: 18px;
  margin-bottom: 10px;
}
.ranking_play {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  line-height: 12px;
  margin: 8px 0;
}
.ranking_play:hover{
  cursor: pointer;
}
.ranking_collect {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  line-height: 12px;
}
.ranking_box {
  width: 335px;
  height: 300px;
  background: #21262c;
  box-shadow: inset 0px 0px 7px 2px #000000;
  border-radius: 0px 0px 20px 20px;
}
.ranking {
  display: flex;
  align-items: center;
  margin: 20px 34px 24px 40px;
  background-color: transparent;
}
.ranking_num {
  width: 18px;
  font-size: 18px;
  font-family: Ropa Sans;
  font-weight: normal;
  color: hsl(0, 0%, 100%);
  line-height: 18px;
}
.ranking_song_name {
  width: 64px;
  height: 16px;
  font-size: 14px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  line-height: 12px;
  margin: 0 78px 0 58px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ranking_singer {
  height: 14px;
  font-size: 12px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  line-height: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* 子代选择器不生效 */
.ranking:nth-child(1) .ranking_num {
  font-size: 30px;
  font-family: Ropa Sans;
  font-weight: normal;
  color: #659274;
  line-height: 30px;
}
.ranking:nth-child(2) .ranking_num {
  font-size: 24px;
  font-family: Ropa Sans;
  font-weight: normal;
  color: #659274;
  line-height: 24px;
}
.ranking:nth-child(3) .ranking_num {
  font-size: 24px;
  font-family: Ropa Sans;
  font-weight: normal;
  color: #659274;
  line-height: 24px;
}
</style>
